<template>
	<view class="message page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/user/index' }"><span class="arrowLeft"></span></router-link>
			<span class="name">{{$t('comm.setting')}}</span>
			<span></span>
		</view>
		<view class="set">
			<ul>
				<li>
					<router-link :underline="false" :to="{ path: '/pages/set/changepassword/index' }">
					<span>{{$t('resetPwd.pwd')}}</span>
					<strong class="arrowRight"></strong>
					</router-link>
				</li>
				<li>
					<span>{{$t('user.version')}}</span><strong>V1.1</strong>
				</li>
			</ul>
			<el-button type="primary" class="submit" @click="submitForm('ruleForm')">{{$t('user.logout')}}</el-button>
		</view>
	</view>
</template>  

<script>
import { getToken } from '@/utils/auth'
import { removeToken } from '@/utils/auth'
	export default {
		data() {
			return {
				user: {}
			}
		},
		methods: {
			async getPersonalInfo() {
				let params = {
					token: getToken()
				}
				const {code, data} = await this.$api.login.getPersonalInfo(params)
				if(code === 200) {
					this.user = data
				}
			},
			submitForm(formName) {
				let that = this
			  let ruleFormNew = {}
			  ruleFormNew = {
			    customerId: this.user.customerId,
			    token:getToken()
			  }
			  console.log(ruleFormNew);
			  this.$api.login.logout(ruleFormNew).then((res) => {
			  	if (res.code == '200') {
			  		removeToken();
			  		this.$router.push('/pages/login')
			  	}
			  })
			  .catch((res) => {})
			}
		},
		mounted() {
			this.getPersonalInfo()
		}
	}
</script>

<style lang="scss" scoped>
.message {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url('@/static/images/set/setbg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		box-sizing: border-box;
		.arrowLeft{
			display:block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 80rpx/60rpx PingFangSC;
			color: #fff;
			padding-top: 200rpx;
			display: block;
		}
	}
	.arrowRight{
		display: inline-block;
		background:url(@/static/images/set/right1.png) no-repeat 0 43rpx;
		width:34rpx;
		height:86rpx;
		background-size:100%;
	}
	.info{
		display: inline-block;
		background:#2446CA;
		width:64rpx;
		height:64rpx;
		margin-right: 40rpx;
		margin-top: 10px;
		border: 0.89px solid #FFFFFF;
		border-radius:32rpx;
		text-align: center;
		position: relative;
		img{
			width:40rpx;
			height:40rpx;
			background-size:100%;
			position:absolute;
			right: 12rpx;
			top:14rpx;
			}
		
	}
	.lock{
		display: inline-block;
		background:url(@/static/images/set/lock.png) no-repeat 0 28rpx;
		width:50rpx;
		height:72rpx;
		background-size:100%;
		margin-right: 40rpx;
	}
	.submit {
		margin:0 auto;
		width:90%;
		height: 100rpx !important;
		font-size: 32rpx;
		color:rgba(255, 255, 255, 1);
		background-color: transparent !important; 
		position: absolute;
		bottom: 90rpx;
		border-radius: 50rpx;
		border: 2rpx solid #999999! important;
		color: #999999;
		
	}
	.set{
		z-index: 999 ;
		padding:100rpx 0;
		width:100%;
		box-sizing: border-box;
		li{
			padding:24rpx;
			margin-bottom:24rpx;
			width:100%;
			height:170rpx;
			line-height: 120rpx;
			box-sizing: border-box;
			font-weight:600;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 40rpx 0rpx rgba(109,80,223,0.1);
			border-radius: 40rpx;
			span{
				float: left;
			}
			span{
				font-size:32rpx;
			}
			strong{
				float: right;
				font-size:24rpx;
				color:#999;
			}
			
		}
		
	}
}
</style>
